import { useRef } from 'react';
import { useNavigate } from 'react-router-dom';
import { ReactSortable } from 'react-sortablejs';

import { Dropdown } from 'antd';
import cs from 'classnames';
import { observer } from 'mobx-react-lite';

import { useTabsStore } from '@/store/tabs';

import { Icon } from '@iconify/react';

import styles from './index.module.scss';

const Tabs: React.FC = () => {
  const navigate = useNavigate();
  const tabsStore = useTabsStore();
  const tabsRef = useRef<HTMLDivElement>(null);

  const onWheel: React.WheelEventHandler<HTMLDivElement> = (event) => {
    if (event.deltaY || event.detail !== 0) {
      tabsRef.current?.scrollBy({
        left: (event.deltaY || event.detail) > 0 ? 50 : -50
      });
    }
  };

  return (
    <div className={styles['tabs']} ref={tabsRef} onWheel={onWheel}>
      <ReactSortable
        list={tabsStore.list.slice()}
        setList={(list) => {
          tabsStore.list = list;
        }}
        animation={200}
        className={styles['tab-list']}
        ghostClass={styles['tab-ghost']}
        draggable={`.${styles['tab']}`}
        handle={`.${styles['tab-drag-handle']}`}
        filter={`.${styles['no-drag']}`}
      >
        {tabsStore.list.map((tab) => {
          const isActive = tab.id === tabsStore.activeTab?.id;

          return (
            <Dropdown
              menu={{
                items: [
                  {
                    label: '关闭标签页',
                    key: 'close',
                    disabled: tabsStore.list.length === 1,
                    onClick: () => {
                      tabsStore.closeTab(tab, 'self');
                    }
                  },
                  {
                    type: 'divider'
                  },
                  {
                    label: '关闭其他标签页',
                    key: 'close-others',
                    disabled: !tabsStore.checkCloseOtherSide(tab),
                    onClick: () => {
                      tabsStore.closeTab(tab, 'others');
                    }
                  },
                  {
                    label: '关闭左侧标签页',
                    key: 'close-left',
                    disabled: !tabsStore.checkCloseLeftSide(tab),
                    onClick: () => {
                      tabsStore.closeTab(tab, 'left');
                    }
                  },
                  {
                    label: '关闭右侧标签页',
                    key: 'close-right',
                    disabled: !tabsStore.checkCloseRightSide(tab),
                    onClick: () => {
                      tabsStore.closeTab(tab, 'right');
                    }
                  }
                ]
              }}
              trigger={['contextMenu']}
              key={tab.id}
            >
              <div
                className={cs(styles['tab'], {
                  [styles['active']]: isActive
                })}
                onClick={() => {
                  if (!isActive) {
                    tabsStore.activeTab = tab;
                    if (tab.path) {
                      navigate(tab.path);
                    }
                  }
                }}
              >
                {tab.icon ? (
                  <div className={styles['tab-icon']}>
                    <Icon icon={tab.icon} />{' '}
                  </div>
                ) : undefined}
                <div className={styles['tab-text']}>{tab.name}</div>
                {tabsStore.list.length > 1 && (
                  <div
                    onClick={(e) => {
                      e.stopPropagation();
                      tabsStore.closeTab(tab, 'self');
                    }}
                    className={styles['tab-close-icon']}
                  >
                    <Icon icon="ri:close-fill" />
                  </div>
                )}
                <div className={styles['tab-drag-handle']} />
              </div>
            </Dropdown>
          );
        })}
      </ReactSortable>
    </div>
  );
};

export default observer(Tabs);
